<template>
  <div class="maintainPay">
    <div class="orderMess">
      <h1 class="shopName">
        <img src="../assets/image/shopLogo.png" alt="" />
        <span>{{shopComMess.SHOP_NAME}}</span>
      </h1>
      <div class="shopItem" v-for='item in shopComMess.SERV_PARAMS'>
        <div class="itemName">{{item.SERV_SUBJECT}}</div>
        <div class="priceNum">
          <div class="num">x{{item.QUANTITY}}</div>
          <div class="price">￥{{item.PRICE}}</div>
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
/*保养支付*/
import { setCookie, getCookie } from '../util/commonUtils';
export default {
  name:"maintainPay",
  // 数据
  data(){
    return{
    	userId:''
    }
  },
  props:['shopComMess'],
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    
  },
  // 子组件
  components:{
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.maintainPay{
  .orderMess{
    .shopName{
      background: #fff;
      display: flex;
      padding-left: 0.2rem;
      height: 0.8rem;
      align-items: center;
      img{
        width: 0.4rem;height: 0.4rem;
      }
      span{
        font-size: 0.28rem;
        color:#000;
        padding-left: 0.24rem;
        font-weight: 550;
      }
    }
    .shopItem,.workHours{
      display: flex;
      height: 0.8rem;
      line-height: 0.8rem;
      align-items:center;
      background: #f8f8f8;
      border-bottom: 1px solid #fff;
      text-align: left;
      .itemName{
        width: 75%;
        font-size: 0.26rem;
        padding-left: 0.2rem;
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .priceNum{
        width: 25%;
        display: flex;
        padding: 0 0.3rem;
        justify-content: space-between;
        .price{
          font-size: 0.28rem;
          color: #000;
        }
        .num{
          font-size: 0.25rem;
          color:#585858;
        }
      }
    }
    .times{
      display: flex;
      background: #fff;
      height: 0.8rem;
      align-items:center;
      font-size: 0.28rem;
      padding: 0 .2rem;
      color: #000;
      font-weight: 550;
      justify-content: space-between;
      .workTimes{
        color:#000;
      }
    }
    .settle{
      display: flex;
      height: 0.8rem;
      align-items:center;
      padding: 0 .2rem;
      justify-content: flex-end;
      span{
        font-size: 0.25rem;
        padding-left: 0.2rem;
      }
      em{
        font-style: normal;
        font-size: 0.23rem;
        color: #ff0000;
      }
    }
  }
  .carMess{
    border-bottom: 0.2rem solid #ebebeb;
  	.carMessItem{
      background: #fff;
  		display: flex;
  		height: 0.8rem;
  		line-height: 0.8rem;
  		label{
  			font-size: 0.3rem; 
  			padding:0 0.1rem 0 0.15rem;
        color: #333;
  		}
  		span{
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
  			font-size: 0.32rem;
        text-align: left;
        color: #666;
  		}
    .brandset{
      width: 82%;
      text-overflow:ellipsis;
    }
  	}
  }
}
</style>